<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { FormProps } from "./components/types";
import { formRules } from "./components/rule";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    agvId: null,
    toStationId: null,
  }),
  agvOptions: [],
  stationSelect:[]
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const agvOptions = ref(props.agvOptions);
const stationSelect = ref(props.stationSelect);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24" >
        <el-form-item label="车辆" prop="agvId">
          <el-select v-model="newFormInline.agvId" filterable clearable placeholder="请选择车辆" style="width:100%">
            <el-option
              v-for="item in agvOptions"
              :key="item.AgvId"
              :label="item.AgvName"
              :value="item.AgvId">
            </el-option>
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24" >
        <el-form-item label="目标站点" prop="toStationId">
          <el-select v-model="newFormInline.toStationId" filterable clearable placeholder="请选择目标站点" style="width:100%">
            <el-option
              v-for="item in stationSelect"
              :key="item.stationid"
              :label="item.stationname"
              :value="item.stationid">
            </el-option>
          </el-select>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
.el-radio{
  margin-right: 16px;
}
</style>
